<template>
  <div>
    <div class="Login_title">
      <van-nav-bar>
        <!-- 左边 -->
        <template #left>
          <div class="title_logo">
            <img src="../assets/images/home_active.png" alt="" />
          </div>
          <div class="title_logo_wenzi">Luckin Coffee</div>
        </template>
        <!-- 右边 -->
        <template v-slot:right>
          <div class="title_right_btn" @click="goHoem()">先逛一逛</div>
        </template>
      </van-nav-bar>
    </div>
    <!-- 顶部结束 -->

    <div class="login">
      <div class="login_info">
        <div class="info_welcome">欢迎回来!</div>
        <div class="info_enwelcome">Please login to your accounts</div>
      </div>
      <!-- 顶部文字  欢迎等 结束 -->

      <div class="login_ipt">
        <van-form >
          <van-field
            v-model="loginUserInfo.phone"
            name="手机号"
            label="手机号"
            placeholder="手机号"
          />
          <van-field
            name="密码"
            label="密码"
            placeholder="密码"
            v-model="loginUserInfo.password"
            @click-right-icon="togglePassword('loginPasswordStatus')"
            :right-icon="loginPasswordStatus ? 'eye-o' : 'closed-eye'"
            :type="loginPasswordStatus ? 'text' : 'password'"
          />
          <div class="ipt_forget"><span @click="goRetrievethepassword">忘记密码?</span></div>
          <div style="margin: 16px">
            <van-button @click="login()" round color="blue" block
              >登&nbsp;&nbsp;录
            </van-button>
          </div>

          <div style="margin: 16px; padding-top: 30px">
            <van-button @click="showPopup()" round block
              >注&nbsp;&nbsp;册</van-button
            >
          </div>
        </van-form>
      </div>
      <!-- 用户名密码登录表单结束 -->
    </div>
    <!-- 初始化页面结束 -->

    <van-popup position="bottom" v-model="show" closeable>
      <div class="register">
        <div class="reg_title">注册</div>
        <div class="reg_form">
          <van-field
            placeholder="11位手机号"
            v-model="regUserInfo.phone"
            type="tel"
            label="手机号"
          />
          <van-field
            placeholder="密码必须为字母开头"
            :type="passwordStatus ? 'text' : 'password'"
            :right-icon="passwordStatus ? 'eye-o' : 'closed-eye'"
            @click-right-icon="togglePassword('passwordStatus')"
            v-model="regUserInfo.password"
            label="密码"
          />
          <van-field
            placeholder="昵称"
            v-model="regUserInfo.nickName"
            label="昵称"
          />
          <div style="margin: 16px; padding-top: 15px">
            <van-button @click="register()" color="blue" round block
              >注&nbsp;&nbsp;册</van-button
            >
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 注册弹窗结束 -->
  </div>
</template>

<script>
// 从外部导入less文件
// import '../assets/less/Login.less';
export default {
  name: "Login",
  data() {
    return {
      // 是否显示弹出层
      show: false,

      // 用户登录信息
      loginUserInfo: {
        phone: "",
        password: "",
      },

      // 注册用户信息
      regUserInfo: {
        phone: "",
        password: "",
        nickName: "",
      },

      // 注册是否显示密码
      passwordStatus: false,

      // 登录是否显示密码
      loginPasswordStatus: false,
    };
  },
  methods: {
    //显示弹出层
    showPopup() {
      this.show = true;
    },

    // 切换是否显示密码
    togglePassword(key) {
      this[key] = !this[key];
    },

    //注册
    register() {
      //表单验证
      //验证手机号
      let registerPhoneReg = /^1[3-9]\d{9}$/;
      if (!registerPhoneReg.test(this.regUserInfo.phone)) {
        //手机号验证不通过
        this.$toast("手机号错误");
        return;
      }

      //验证密码
      //支持字母数字组合, 且必须以字母开头, 6-16位
      let registerPasswrodReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if (!registerPasswrodReg.test(this.regUserInfo.password)) {
        this.$toast("密码支持字母数字组合");
        return;
      }

      //验证昵称
      //支持中英文组合, 1-10位
      let registerNickNameReg = /^[A-Za-z\u4e00-\u9fa5]{1,10}$/;
      if (!registerNickNameReg.test(this.regUserInfo.nickName)) {
        this.$toast("昵称格式错误");
        return;
      }
      

      //发起注册请求
      this.axios({
        method: "post",
        url: "/register",
        data: this.regUserInfo,
      })
        .then((res) => {
          
          this.$toast(res.data.msg);
          if (res.data.code === 100) {
            this.show = false;
            this.regUserInfo.phone = "";
            this.regUserInfo.password = "";
            this.regUserInfo.nickName = "";
          }
        })
        .catch((err) => {
          
        });
    },

    // 登录
    login() {
      //表单验证
      //验证手机号
      let loginPhoneReg = /^1[3-9]\d{9}$/;
      if (!loginPhoneReg.test(this.loginUserInfo.phone)) {
        //手机号验证不通过
        this.$toast("手机号格式错误");
        return;
      }
      //验证密码
      //支持字母数字组合, 且必须以字母开头, 6-16位
      let loginPasswrodReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if (!loginPasswrodReg.test(this.loginUserInfo.password)) {
        this.$toast("密码必须包含英文字母和数字");
        return;
      }

      //发起登录请求
      this.axios({
        method: "post",
        url: "/login",
        data: this.loginUserInfo,
      })
        .then((res) => {
          
          if(res.data.code === 201){
            this.$toast(res.data.msg)
            return
          }
          if(res.data.code === 202){
            this.$toast(res.data.msg)
            return
          }
          if (res.data.code === 200) {
            
            this.$toast("登录成功");
            // this.$cookies.set("TOKEN", res.data.token, "1d");
            window.localStorage.setItem("TOKEN",res.data.token)
              // let aa =  localStorage.getItem("aaa");
            setTimeout(() => {
              this.$router.push({ name: "Home" });
            }, 1000);
          }
        })
        .catch((err) => {
          
        });
    },

    // 点击忘记密码 跳转到找回密码页面
    goRetrievethepassword(){
      this.$router.push({name:"Retrievethepassword"})
    },

    // 逛一逛方法
    goHoem(){
      this.$router.push({name:"Home"})
    }
  },
};
</script>

<style lang="less" scoped>
.title_logo {
  width: 45px;
  height: 45px;
  img {
    width: 100%;
    height: 100%;
  }
}
.title_logo_wenzi {
  font-size: 18px;
  color: #333;
}
.title_right_btn {
  color: blue;
  font-weight: bold;
  font-size: 13px;
}
// 顶部结束

.login {
  position: fixed;
  top: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 100px;
  .login_info {
    padding-left: 20px;
    .info_welcome {
      font-size: 30px;
      font-weight: bolder;
      color: #555;
      margin-bottom: 20px;
    }
    .info_enwelcome {
      font-size: 14px;
      color: #999;
    }
  }
  // 欢迎你文字结束

  .login_ipt {
    padding-top: 30px;
    .ipt_forget {
      padding-top: 15px;
      text-align: right;
      padding-right: 20px;
      span {
        padding: 5px 10px;
      }
    }
  }
  // 用户名密码登录注册表单结束
}
// 初始化登录注册页面结束

.register {
  .reg_title {
    font-size: 25px;
    font-weight: bold;
    color: #555;
    margin: 15px;
  }
  .reg_form {
    padding-top: 20px;
  }
}
// 弹出框结束
</style>